<!DOCTYPE html>
<html>
    <head>
        <title>1</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            Vue中的事件修饰符：
                1.prevent：阻止默认事件（常用）；
                2.stop：阻止事件冒泡（常用）；
                3.once：事件只触发一次（常用）；
                4.capture：使用事件的捕获模式；
                5.self：只有event.target是当前操作的元素是才触发事件；
                6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
        -->
       <div id="root">
            <h1>hello</h1>
            <!-- 等效于e.preventDefault() -->
            <a href="https://www.baidu.com" @click.prevent="showInfo">跳转</a>

            <div @click="c1">
                <button @click.stop="c1">点击1</button>
            </div>

            <button @click.once="c1">点击2</button>

            <div @click.capture="c3(1)">
                <button @click="c3(2)">点击3</button>
            </div>

            
            <div @click.self="c1">
                <button @click="c1">点击4</button>
            </div>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false
            new Vue({
                el: '#root', 
                data(){
                    return {
                        name:''
                    }
                },
                methods:{
                    showInfo(e){
                        // e.preventDefault()
                        alert('你好')
                    },
                    c1(e){
                        console.log(1)
                    },
                    c3(n){
                        console.log(n)
                    }
                }
            })
        </script>
    </body>
</html>
